<!--  -->
<template>
     <div class="newstabbar container">
    <!-- 上方菜单 -->
    <div class="main">
      <ul>
        <li  @click="$router.push('/news/feed')" class="main-feed" :class="{active:this.$route.path === '/news/feed'? true:false}" >小宠饲养</li>
        <li  @click="$router.push('/news/train')" class="main-train" :class="{active:this.$route.path === '/news/train'? true:false}"  >小宠训练</li>
        <li  @click="$router.push('/news/medical')" class="main-medical" :class="{active:this.$route.path === '/news/medical'? true:false}"  >小宠医疗</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name:"Newstabbar",
  data () {
    return {
    };
  },

}

</script>
<style lang='less' scoped>
@import '../../assets/css/total.less';
.newstabbar{
  .main{
    display: flex;
    align-items: center;
    background-color: #ccc;
    ul{
      display: flex;
      align-items: center;
      li{
        height: 40px;
        font-weight: 700;
        font-size: 30px;
        text-align: center;
        padding: 20px;
        cursor: pointer;
        
      }
      .main-feed,.main-train,.main-medical{
         &:hover{
           background-color: rgb(16, 67, 231);
           color: white;
           font-size: 33px;
         } 
         &.active{
           background-color:rgb(16, 67, 231);
           color: white;
           font-size: 33px;
         }
        }
    }
  }
}
</style>